<template>
  <div class="IncomeDetail" ref="homePage">
    <div class="bj">
      <van-nav-bar title="收益明细" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div v-if="datalist.length == 0" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无相关数据哦</p>
    </div>

    <div v-else class="incomeContent">
      <div class="main">
        <!-- <div class="title">我的收益明细</div> -->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <ul>
            <li class="item" v-for="(item,indexs) in datalist" :key="indexs">
              <div class="lfileds">
                <p v-if="item.Status === 10" class="stauts">收益 </p>
                <p v-if="item.Status === 20" class="stauts">支出 </p>
                <p v-if="item.Status === 90" class="stauts">取消 </p>
                <p class="time">{{renderTime(item.Createtime)}}</p>
              </div>
              <div class="money">
                <p><span class="num">{{item.Amout}}元</span> </p>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
    <!-- incomeContent end -->
  </div>
</template>

<script>
import { IncomeDetail } from '@/api/home.js'
export default {

  data () {
    return {
      loading: false, // 控制上拉加载的加载动画
      finished: false, // 控制在页面往下移动到底部时是否调用接口获取数据
      totalPage: 0,
      pageSize: 5,
      pageIndex: 0,
      clintHeigth: '', // 获取页面高度
      datalist: []
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    this.onLoad()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 第一次请求
    onLoad () {
      let self = this
      setTimeout(() => {
        let data = {
          pageIndex: self.pageIndex + 1,
          pageSize: self.pageSize
        }
        IncomeDetail(data).then(res => {
          console.log(res)
          self.totalPage = res.data.Total / self.pageSize
          if (res.data.list.length > 0) {
            self.datalist = self.datalist.concat(res.data.list)
          }
          self.loading = false
          self.pageIndex++
          if (self.pageIndex >= self.totalPage) {
            self.finished = true
          }
        })
      }, 500)
    },
    renderTime (date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  }
}
</script>

<style lang="scss" scoped>
.IncomeDetail {
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .incomeContent {
    padding: 30px 20px;
    .main {
      border-radius: 10px;
      background: #fff;
      padding: 15px;
      ul {
        margin-bottom: 30px;
      }
      ul li.item {
        border-bottom: 1px dashed #e7e7e7;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .stauts {
          font-size: 16px;
          font-weight: 600;
          color: #000;
        }
        .time {
          color: #818181;
          padding-top: 5px;
        }
        .money p {
          color: #ff8f5f;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
